<template>
  <div class="personalCenter">
    <!-- 个人中心页面 -->
    <div class="t4_w">
      <div class="personalHeader">
        <div class="headerAvatar">
          <div class="avatarImage">
            <img src="../../assets/images/yh_login.jpg" alt="" />
            <p>
              <span>你好,{{ nickName }}</span>
              <span>{{ userName }}</span>
            </p>
          </div>
        </div>
        <div class="headerNum">
          <div class="headerNumItem">
            <div>
              <h3 class="numItem">数据资源总数</h3>
              <h3 class="quantity">{{ dataNum }}个</h3>
            </div>
          </div>
          <div class="headerNumItem">
            <div>
              <h3 class="numItem">服务资源总数</h3>
              <h3 class="quantity">{{ apiNum }}个</h3>
            </div>
          </div>
          <div class="headerNumItem">
            <div>
              <h3 class="numItem">数据资源申请中</h3>
              <h3 class="quantity">{{ dataAppNum }}个</h3>
            </div>
          </div>
          <div class="headerNumItem">
            <div>
              <h3 class="numItem">服务资源申请中</h3>
              <h3 class="quantity">{{ apiAppNum }}个</h3>
            </div>
          </div>
        </div>
      </div>
      <div class="ant_row">
        <div class="ant_colLeft">
          <ul class="actionMenu_ul">
            <li
              class="actionMenu"
              v-for="(item, index) in tabs"
              :key="index"
              @click="selected(index)"
            >
              <img :src="item.image" alt="" />
              <span :class="{ active: index === selectedTab }">{{
                item.title
              }}</span>
            </li>
          </ul>
        </div>
        <div class="ant_colRight">
          <Personal :is="selectedComponent" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Personal from "./components/personal";
import Resources from "./components/resources";
import Access from "./components/access.vue";
import Applications from "./components/applications";
import Accepted from "./components/accepted";
import Messages from "./components/messages";
import APPkey from "./components/appkey.vue";
import { getOverview, getInfo } from "@/utils/httpUtils";
export default {
  components: {
    Personal,
    Resources,
    Access,
    Applications,
    Accepted,
    Messages,
    APPkey,
  },
  data() {
    return {
      nickName: "", //用户昵称
      tabs: [
        {
          title: "个人信息",
          image: require("@/assets/images/icon1.png"),
        },
        {
          title: "我的资源",
          image: require("@/assets/images/icon2.png"),
        },
        // {
        //   title: "调用方访问情况",
        //   image: require("@/assets/images/icon3.png"),
        // },
        {
          title: "我的申请",
          image: require("@/assets/images/icon4.png"),
        },
        // {
        //   title: "我的需求申请",
        //   image: require("@/assets/images/icon4.png"),
        // },
        // {
        //   title: "我的需求审批",
        //   image: require("@/assets/images/icon4.png"),
        // },
        {
          title: "我的接收库",
          image: require("@/assets/images/icon5.png"),
        },
        // {
        //   title: "我的消息",
        //   image: require("@/assets/images/icon6.png"),
        // },
        {
          title: "APP key 管理",
          image: require("@/assets/images/icon7.png"),
        },
      ],
      selectedTab: 0,
      dataNum: "", // 数据资源总数
      apiNum: "", //服务资源总数
      apiAppNum: 0, //服务资源申请中
      dataAppNum: 0, //数据资源申请中
      userName: "", //用户名称
    };
  },
  computed: {
    selectedComponent() {
      const components = [
        "Personal",
        "Resources",
        // "Access",
        "Applications",
        // "xqApplications",
        // "spxqApplications",
        "Accepted",
        // "Messages",
        "APPkey",
        // 其他组件名称...
      ];
      return components[this.selectedTab];
    },
  },
  mounted() {
    this.Overview();
    this.userInfo();
  },
  methods: {
    selected(index) {
      this.selectedTab = index;
    },
    // 个人概括
    Overview() {
      getOverview().then((res) => {
        console.log(res, "个人概括");
        this.dataNum = res.dataCount;
        this.apiNum = res.apiCount;
        this.apiAppNum = res.apiAppCount;
        this.dataAppNum = res.dataAppCount;
      });
    },
    userInfo() {
      getInfo().then((res) => {
        // this.userName = res.username;
        this.nickName = res.nickName;
      });
    },
  },
};
</script>
<style scoped>
.personalCenter {
  background: #f0f2f5;
  min-height: 800px;
}

.personalCenter .t4_w {
  margin-top: 50px;
  margin-bottom: 220px;
}

.personalCenter .t4_w .personalHeader {
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 16px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 2px #cacaca;
}

.personalCenter .t4_w .personalHeader .headerAvatar {
  flex-grow: 1;
  text-align: center;
  font-size: 18px;
  margin-top: 12px;
}

.personalCenter .t4_w .personalHeader .headerAvatar .avatarImage img {
  width: 64px;
  height: 64px;
}

.personalCenter .t4_w .personalHeader .headerNum {
  flex-grow: 4;
  align-items: center;
  padding: 30px 0;
  display: flex;
}

.personalCenter .t4_w .personalHeader .headerNum .headerNumItem {
  display: flex;
  flex-grow: 4;
  align-items: center;
  justify-content: center;
  text-align: right;
  border-right: 1px solid #d7d7d7;
}

.personalCenter .t4_w .personalHeader .headerNum .headerNumItem h3 {
  margin-bottom: 0;
}

.personalCenter .t4_w .personalHeader .headerNum .headerNumItem .numItem {
  font-size: 15px;
}

.personalCenter .t4_w .personalHeader .headerNum .headerNumItem .quantity {
  font-size: 27px;
}

.personalCenter .t4_w .ant_row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-height: 600px;
  margin-bottom: 16px;
}

.personalCenter .t4_w .ant_row .ant_colLeft {
  width: 19.5%;
  min-height: 600px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 2px #cacaca;
}

.personalCenter .t4_w .ant_row .ant_colLeft .actionMenu_ul {
  margin: 0;
  padding: 0;
}

.personalCenter .t4_w .ant_row .ant_colLeft .actionMenu_ul .actionMenu {
  padding: 10px 0px 20px 40px;
  font-weight: 400;
  font-size: 16px;
  cursor: pointer;
}

.personalCenter .t4_w .ant_row .ant_colLeft .actionMenu_ul .actionMenu img {
  width: 25px;
  height: 25px;
}

.personalCenter .t4_w .ant_row .ant_colLeft .actionMenu_ul .actionMenu .active {
  color: #0062b4;
}

.personalCenter .t4_w .ant_row .ant_colRight {
  width: 79%;
  display: block;
  min-height: 600px;
  padding: 12px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 2px #cacaca;
}

.personalCenter .t4_w .ant_row .ant_colRight .ant-btn {
  text-align: center;
}

.personalCenter .t4_w .ant_row .ant_colRight .ant-btn button {
  width: 63px;
  height: 32px;
  color: #fff;
  background: #0062b4;
  border-color: transparent;
  border-radius: 4px;
}

.personalCenter .t4_w .ant_row .ant_colRight .el-form {
  width: 50%;
  margin: 0 auto;
}
</style>
